<template>
    <div class="shop_car_wrap">
        <div class="shop_car_header">
            <i class="el-icon-arrow-left" @click="handleBack"></i>
            <p>购物车</p>
            <p></p>
        </div>
        <div class="shop_car_list">
            <ul v-if="car_list.length > 0" style="overflow: hidden;">
                <li v-for="(item,index) in car_list" :key="item.cart_id" ref="touchmove"
                    v-leftMove="{container: '[data-touchmove-con]'}">
                    <div class="shopCar">
                        <div class="shop_car_main">
                            <div class="shop_car_select" v-if="isEffective(item)">
                                <div v-if="select[index] !== item.cart_id" class="shop_select_circle"
                                     @click="handleSelectShop(item.cart_id,index,item.quantity,item.price)"></div>
                                <div v-if="select[index] === item.cart_id" class="shop_select_active"
                                     @click="handleSelectShop(item.cart_id,index,item.quantity,item.price)">
                                    <i class="el-icon-check"></i>
                                </div>
                            </div>
                            <div class="shop_car_select" v-if="!isEffective(item)">
                                <p style="color: #999999;width: 50px;background-color: #EDECEA;font-size: 22px;text-align: center;padding: 4px">失效</p>
                            </div>

                            <div class="shop_info_logo">
                                <el-image v-if="item.snapshot && item.snapshot.images"
                                        :src="$config.baseUrl + item.snapshot.images[0].file_path"
                                        fit="cover"></el-image>
                            </div>
                            <div class="shop_info_specs">
                                <p class="shop_info_desc">
                                    {{item.snapshot && item.snapshot.title}}
                                </p>
                                <p v-if="item.sku_mark" class="shop_info_sku_mark">
                                    已选: {{item.sku_mark}}
                                </p>
                                <div class="shop_info_select">
                                    <p class="shop_info_price">￥ {{item.price}}</p>
                                    <div class="shop_info_coc">
                                        <i @click="handleDecrease(item,index)" class="el-icon-remove-outline"></i>
                                        <p>{{item.quantity}}</p>
                                        <!--<input style="border:none;width:65px;text-align: center"
                                               type="number" :value="item.quantity">-->
                                        <!--<el-input v-else v-model="sum"></el-input>-->
                                        <i @click="handleAdd(item,index)" class="el-icon-circle-plus-outline"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="shop_car_delete" @click="handleDelete(item,index)">
                        删除
                    </div>
                </li>
            </ul>
            <div v-else class="not_list">
                <img src="../../assets/img/icon-shopping-cart@2x.png" alt="">
                <p>你的购物车还没有商品</p>
            </div>
        </div>
        <div class="shop_car_bottom" v-if="car_list.length > 0">
            <div class="shop_select_all" @click="handleSelectAllShop(select_num.length !== car_list.length)">
                <div v-if="select_num.length !== car_list.length" class="shop_select_circle"></div>
                <div v-if="select_num.length === car_list.length" class="shop_select_active">
                    <i class="el-icon-check"></i>
                </div>
                <p class="shop_select_label">全选</p>
                <p class="shop_select_price">￥：<span>{{all_price}}</span></p>
            </div>
            <div class="shop_car_download">
                <a href="http://produce.jmzhipin.com/download">下载得米快找</a>
            </div>
            <div class="shop_car_buy" @click="handleCreate()">
                立即购买
            </div>
        </div>

        <div v-if="settlement">
            <div class="shop_car_dialog_bg" @click="handleCancel"></div>
            <payment @on-handle-cancel="handleCancel" :select_num="select_num"></payment>
        </div>
    </div>
</template>

<script>
    import {getToken} from '../../libs/http';
    import payment from '../../components/payment'
    import http from '../../libs/http'

    export default {
        name: 'index',
        components: {payment},
        data() {
            return {
                car_list: [],
                all_price: 0,
                // sum: 1,
                radio: '1',
                select: [],
                // name: '',
                id: '',
                settlement: false,
                // over:true
            }
        },
        mounted() {
            this.initialize()
        },
        computed: {
            select_num: function () {
                let length = this.select.length;
                let array = []
                if (length > 0) {
                    for (let i = 0; i < length; i++) {
                        if (this.select[i]) {
                            array.push(this.select[i])
                        }
                    }
                    return array
                } else {
                    return array
                }
            },
        },
        created() {
            this.getParams();
        },
        methods: {
            initialize() {
                if (sessionStorage.getItem('shopId')) {
                    this.apiGet('api/cart?shop_id=' + sessionStorage.getItem('shopId')).then((res) => {
                        console.log(res);
                        if (res) {
                            this.car_list = res;
                            if(this.select_num.length === this.car_list.length){
                                this.handleSelectAllShop(true)
                            }
                        }
                    })
                }
            },
            getParams() {
                // 取到路由带过来的参数
                // this.name = this.$route.query.name;
                this.id = this.$route.query.id;
            },
            isEffective:function (item) {
                if(item.goods){
                    if(item.goods.is_sku){
                        let length = item.goods.sku.length;
                        let index
                        for(let i = 0;i<length;i++){
                            if(item.sku_mark == item.goods.sku[i].mark){
                                index = i
                            }
                        }
                        if((item.price == item.goods.sku[index].price) && (item.quantity <= item.goods.sku[index].inventory)){
                            return true
                        }else{
                            return false
                        }
                    }else{
                        if((item.price == item.goods.price) && (item.quantity <= item.goods.inventory )){
                            return true
                        }else{
                            return false
                        }
                    }
                }else{
                    return false
                }
            },
            handleBack() {
                if (this.id) {
                    this.$router.push({
                        name: 'shop_info',
                        // name: this.name,
                        query: {id: this.id, task_order_id: sessionStorage.getItem('task_order_id')}
                    });
                } else {
                    this.$router.push({
                        name: 'index',
                        query: {id: this.id, task_order_id: sessionStorage.getItem('task_order_id')}
                    })
                }
            },
            handleDecrease(item,index) {
                this.apiGet('api/cart/clear?cart_id=' + item.cart_id + '&quantity=1').then((res) => {
                    console.log(res)
                    if(res){
                        this.initialize()
                        this.handleSelectShop(item.cart_id,index,1,item.price,"decrease")
                    }
                })
            },
            handleAdd(item,index) {
                let data;
                if(item.snapshot.is_sku){
                    data = {
                        goods_id:item.snapshot.goods_id,
                        attrs:item.sku_mark.split(','),
                        quantity:1
                    };
                }else{
                    data = {
                        goods_id:item.snapshot.goods_id,
                        // attrs:item.sku_mark.split(','),
                        quantity:1
                    };
                }

                let quantity;
                this.apiGet('api/goods/info/' + item.snapshot.goods_id).then((res)=>{
                    if(res){
                        if(res.is_sku){
                            let length = res.sku.length
                            for (let i = 0;i<length;i++){
                                if(item.sku_mark.split(',') == res.sku[i].mark){
                                    quantity = res.sku[i].inventory
                                    if(item.quantity <= quantity){
                                        this.apiPost('api/cart/add',data).then((res)=>{
                                            console.log(res)
                                            if(res){
                                                this.initialize();
                                                this.handleSelectShop(item.cart_id,index,1,item.price,"add")
                                            }
                                        })
                                    }else{
                                        this.$message.error('库存不足')
                                    }
                                }
                            }
                        }else{
                            if(item.quantity <= res.inventory){
                                this.apiPost('api/cart/add',data).then((res)=>{
                                    if(res){
                                        this.initialize();
                                        this.handleSelectShop(item.cart_id,index,1,item.price,"add")
                                    }
                                })
                            }else{
                                this.$message.error('库存不足')
                            }

                        }

                    }
                });


                // this.sum = parseInt(this.sum) + 1;
            },
            handleDelete(item,index) {
                this.apiGet('api/cart/clear?cart_id=' + item.cart_id).then((res) => {
                    console.log(res)
                    if (res) {
                        this.initialize()
                        this.handleSelectShop(item.cart_id,index,item.quantity,item.price,'decrease')
                    }
                })
            },
            handleSelectShop(id, index, accout, price, coc=null) {
                let length = this.select.length;
                if(!coc){
                    if (length > 0) {
                        if (this.select[index] === id) {
                            this.all_price = this.all_price - (accout * price);
                            this.$set(this.select, index, '')
                        } else {
                            this.all_price = this.all_price + (accout * price);
                            this.$set(this.select, index, id)
                        }
                    } else {
                        this.all_price = accout * price;
                        this.$set(this.select, index, id)
                    }
                }else{
                    if (length > 0){
                        for(let i = 0;i<length;i++){
                            if(id === this.select[i]){
                                if(coc === 'add'){
                                    this.all_price = this.all_price + accout * price;
                                }else{
                                    this.all_price = this.all_price - accout * price;
                                }
                            }
                        }
                    }
                }

            },
            handleSelectAllShop(select) {
                this.select = [];
                this.all_price = 0;
                if (select) {
                    let length = this.car_list.length;
                    for (let i = 0; i < length; i++) {
                        if(this.isEffective(this.car_list[i])){
                            this.all_price = this.all_price + (this.car_list[i].quantity * this.car_list[i].price)
                            this.select.push(this.car_list[i].cart_id)
                        }
                    }
                } else {
                    this.all_price = 0
                    this.select = []
                }
            },
            handleCreate(){
                if(this.select.length > 0){
                    this.settlement = true
                }
            },
            handleCancel() {
                this.settlement = false
            },
        },
        mixins: [http]
    }
</script>

<style lang="stylus">
    .shop_car_wrap
        width 100%
        padding-bottom 45px

        .shop_car_header
            height: 44px;
            font-size: 16px;
            color #333333;
            display flex;
            text-align: center;
            line-height: 44px;
            justify-content space-between
            border-bottom 1px solid #E6E6E6

            i, p
                align-self center

            p
                margin-right 20px

            i
                padding-left 20px

        .shop_car_list
            padding 0 0 0 20px
            text-align left
            overflow-y hidden

            .not_list
                text-align center
                margin 45px 25px 0 0
                font-size: 14px;
                color #cccccc

                img
                    width 143px
                    margin-bottom 13px

            ul
                li
                    margin 20px 0
                    position relative
                    height 90px

                    .shopCar
                        padding-right 20px
                        position absolute
                        top: 0
                        left 0
                        right 0
                        bottom 0

                        .shop_car_main
                            display flex

                            .shop_car_select
                                align-self center

                                .shop_select_circle, .shop_select_active
                                    width: 19px;
                                    height: 19px;
                                    margin-right 10px
                                    border-radius: 50%;
                                    border: 1px solid rgba(153, 153, 153, 1);

                                .shop_select_active
                                    width: 21px;
                                    height: 21px;
                                    border none
                                    position relative
                                    background: rgba(59, 199, 255, 1);

                                    i
                                        color white
                                        position absolute
                                        top: 50%;
                                        left 50%;
                                        transform translate3d(-50%, -50%, 0)

                            .shop_info_logo
                                align-self center
                                margin-right 12px

                                img
                                    width 90px
                                    height 90px
                                    border-radius: 5px;

                            .shop_info_specs
                                width 100%
                                align-self center

                                .shop_info_desc
                                    font-size: 15px;
                                    font-weight: bold;
                                    color: rgba(0, 0, 0, 1);
                                    line-height 20px
                                    margin-bottom 10px
                                .shop_info_sku_mark
                                    font-size: 13px;
                                    color: rgba(0, 0, 0, 1);
                                    margin-bottom 10px
                                .shop_info_select
                                    display flex
                                    justify-content space-between

                                    .shop_info_price
                                        align-self center
                                        font-size: 17px;
                                        font-weight: 800;
                                        color: rgba(255, 91, 5, 1);

                                    .shop_info_coc
                                        align-self center
                                        display flex

                                        i
                                            align-self center
                                            font-size 20px
                                        p
                                            align-self center
                                            text-align center
                                            width 65px
                                            height 20px
                                            line-height 20px
                                        .el-input
                                            align-self center

                                        .el-input__inner
                                            width 65px
                                            border none
                                            height 20px
                                            text-align center

                    .shop_car_delete
                        position absolute
                        top 0
                        right -79px
                        width 59px
                        height 90px
                        font-size: 14px;
                        line-height 90px
                        text-align center
                        color: rgba(241, 241, 241, 1);
                        background: rgba(244, 51, 60, 1);

        .shop_car_bottom
            position fixed
            left 0;
            bottom 0;
            width 100%
            height: 45px;
            display flex
            background-color white
            border-top 1px solid rgba(59, 199, 255, 1)

            .shop_select_all
                width 156px
                height 100%
                align-self center
                display flex
                justify-content center
                border-right: 1px solid rgba(59, 199, 255, 1);

                .shop_select_circle, .shop_select_active
                    align-self center
                    width: 19px;
                    height: 19px;
                    margin-right 10px
                    border-radius: 50%;
                    border: 1px solid rgba(153, 153, 153, 1);

                .shop_select_active
                    width: 21px;
                    height: 21px;
                    border none
                    position relative
                    background: rgba(59, 199, 255, 1);

                    i
                        color white
                        position absolute
                        top: 50%;
                        left 50%;
                        transform translate3d(-50%, -50%, 0)

                .shop_select_label
                    align-self center
                    font-size: 15px;
                    color: rgba(0, 0, 0, 1);
                    margin-right 10px

                .shop_select_price
                    font-size: 15px;
                    align-self center
                    color: rgba(255, 115, 52, 1);

            .shop_car_download, .shop_car_buy
                align-self center
                font-size: 15px;

            .shop_car_download
                padding 0 12px

                a
                    color: rgba(36, 191, 255, 1);

            .shop_car_buy
                width: 104px;
                height 100%
                line-height 45px;
                color: rgba(255, 255, 255, 1);
                background: rgba(59, 199, 255, 1);

        .shop_car_dialog_bg
            position fixed
            top: 0;
            left 0;
            right 0
            bottom 0;
            width 100%;
            height 100%;
            overflow hidden
            background-color rgba(0, 0, 0, .5);

    /*.open-enter-active, .open-leave-active {
        transform: translateY(0);
        opacity: 1;
        transition: all 5s;
    }

    .open-enter, .open--leave-to !* .fade-leave-active below version 2.1.8 *! {
        opacity: 0;
        transform: translateY(100%);
    }*/
</style>